<template>
    <div class="page-channel">
        <div class="header">
            全部频道
            <a  @click="done" class="close">&#10005</a>
        </div>
        <div class="scroll-list" @touchmove.stop="dragMove" @touchend="dragEnd" @touchcancel="dragEnd" @touchstart="overflowStart($event)">
            <div class="head">
                <div class="tit">
                    我的频道<span>长按拖动可以排序</span>
                </div>
                <a href="javascript:;" @click="editOrDone">{{isEdit ? '完成' : '编辑'}}</a>
            </div>
            <div class="item-list draw-box">
                <a href="javascript:;" v-show="drag.status" @transitionend="dragTransitonEnd" ref="dragel" class="item dragging-wrap" :style="dragItemStyle">
                    <span>{{drag.item.name}}</span>
                </a>
                <a href="javascript:;" class="item freeze" 
                    v-for="item in freeze" 
                    :key="item.name">
                    <span>{{item.name}}</span>
                </a>

                <a href="javascript:;" class="item" 
                    v-for="(item,index) in my" 
                    :candrag="isEdit"
                    :data-name="item.name"
                    @touchstart.stop.prevent="dragStart(item,$event)"
                    v-dragging="{ item: item, list: my, group: 'my' }"
                    :key="item.name">
                    <a href="javascript:;" v-show="isEdit" @touchstart.stop.prevent="removeMy(index)" @mousedown="removeMy(index)"  class="uicon uicon-close-dark close"></a>
                    <span>{{item.name}}</span>
                </a>
            </div>

            <div class="head">
                <div class="tit">
                    频道推荐<span>点击添加频道</span>
                </div>
            </div>

            <div class="tabs">
                <a href="javascript:;" :class="{'on':tab==0}" @click="tab = 0">精选频道</a>
                <a href="javascript:;" :class="{'on':tab==1}" @click="tab = 1">地方频道</a>
            </div>
            <div class="tabs-list">
                <div class="item-list" v-show="tab == 0">
                    <a href="javascript:;" @click="push('all',item,index)" class="item" v-for="(item,index) in all" :key="item.name"><span>{{item.name}}</span></a>
                </div>

                <div class="item-list" v-show="tab == 1">
                    <a href="javascript:;" @click="push('area',item,index)" class="item" v-for="(item,index) in area" :key="item.name"><span>{{item.name}}</span></a>
                </div>
            </div>
        </div>

         <offline/>
    </div>
</template>
<script>
import offline from '../components/offline.vue'
export default {
    name:'popup-channel',
    props:{
        type:{
            type:String,
            default:'news'
        },
        config:{
            type:Object
        }
    },
    data(){
        return {
            isEdit:false,
            drag:{
                status:false,
                isDone:false,
                timeout:'',
                item:'',
                opacity:0,
                duration:0,
                position:'static',
                left:0,
                top:0,
                x:0,
                y:0,
                originX:0,
                originY:0,
                offset:0,
            },
            tab:0,
            freeze:[],
            my:[],
            all:[],
            area:[]
        }
    },
    components:{
        [offline.name]:offline
    },
    computed:{
        dragItemStyle(){
            return {
                'transition-property':'all',
                'transition-duration': this.drag.duration,
                "z-index" : 9,
                'opacity': this.drag.opacity,
                'position' : this.drag.position,
                'left' : this.drag.left +'px',
                'top' : this.drag.top +'px',
            }
        }
    },
    mounted(){
        let oldList = this.config.my.concat();
        let myChannelString = JSON.stringify(oldList);
        let freeze = [],all = [],area = [],my = [];
        let listAll = this.config[this.type];
        if(oldList.length>0){
            oldList.forEach(item=>{
                 if(item.is_fix == 1){
                    freeze.push(item);
                }else{
                    my.push(item);
                }
            })
            listAll.concat().forEach(item=>{
                item.type = 'channel';
                if(myChannelString.indexOf(`"name":"${item.name}"`) === -1){
                    all.push(item);
                }
            })

            this.config.area.concat().forEach(item=>{
                item.type = "area";
                if(myChannelString.indexOf(`"name":"${item.name}"`) === -1){
                    area.push(item);
                }
            })
        }else{
            listAll.concat().forEach(item=>{
                item.type = 'channel';
                if(item.is_fix == 1){
                    freeze.push(item);
                }else{
                    if(myChannelString.indexOf(`"name":"${item.name}"`) === -1){
                        all.push(item);
                    }else{
                        my.push(item);
                    }
                }
            })

            this.config.area.concat().forEach(item=>{
                item.type = "area";
                if(item.is_fix == 1){
                    freeze.push(item);
                }else {
                    if(myChannelString.indexOf(`"name":"${item.name}"`) === -1){
                        area.push(item);
                    }else{
                        my.push(item);
                    }
                }
                
            })
        }
        

        this.freeze = freeze;
        this.all = all;
        this.area = area;
        this.my = my;
    },
    methods:{
        initDragWrap(el,x,y){
            let draw = document.querySelector('.draw-box');
            let drawRect = draw.getBoundingClientRect();
            this.drag.offset = drawRect.top + drawRect.height;
            this.drag.timeout = '';
            let rect = el.getBoundingClientRect();
            this.drag.position = 'absolute';
            this.drag.duration = '0s';
            this.drag.opacity = 1;
            this.drag.top = rect.top;
            this.drag.left = rect.left;
            this.drag.x = x;
            this.drag.y = y;
            this.drag.originX = rect.left;
            this.drag.originY = rect.top;
            this.drag.status = true;
        },
        dragStart(item,e){
            let el = e.currentTarget;
            if(e.target.tagName.toUpperCase() == 'A'){
                return false;
            }
            if(e.touches){
                let x = e.touches[0].pageX;
                let y = e.touches[0].pageY;
                this.drag.item = item;
                if(this.isEdit){
                    this.initDragWrap(el,e.touches[0].pageX,e.touches[0].pageY);
                }else{
                    this.drag.timeout = setTimeout(()=>{
                        this.isEdit = true;
                        this.initDragWrap(el,e.touches[0].pageX,e.touches[0].pageY);
                    },1000)
                }
            }
        },
        dragMove(e){
            if(!this.isEdit || (!e.target.getAttribute('candrag') && !e.target.parentNode.getAttribute('candrag'))) {
                //滚动判断
                let y = e.touches[0].pageY;
                let offset = y - e.currentTarget.ovy;
                // console.log({
                //     height:e.currentTarget.offsetHeight,
                //     scrollTop:e.currentTarget.scrollTop,
                //     scrollHeight:e.currentTarget.scrollHeight,
                //     ovy:e.currentTarget.ovy,
                //     y,
                //     offset,
                // })
                if(e.currentTarget.scrollTop == 0 && offset >0 || (e.currentTarget.offsetHeight + e.currentTarget.scrollTop == e.currentTarget.scrollHeight && offset < 0)){
                    e.preventDefault();
                }
                //end滚动判断
                return false;
            }

            e.preventDefault();
            // let el = this.$refs.dragel;
            let x = e.touches[0].pageX - this.drag.x,
                y = e.touches[0].pageY - this.drag.y;
    
       
            this.drag.left += x;
            this.drag.top += y;
            this.drag.x = e.touches[0].pageX;
            this.drag.y = e.touches[0].pageY;
        },
        dragEnd(e){
            e.currentTarget.ovy = 0;
            if(this.drag.timeout){
                clearTimeout(this.drag.timeout);
                this.drag.timeout = '';
            }
            if(!this.isEdit || !this.drag.status) return false;
            this.dragDone();
            
            
        },
        dragDone(){
            let el = document.querySelector('[data-name="'+this.drag.item.name+'"]');
            if(el){
                let rect = el.getBoundingClientRect();
                this.drag.originX = rect.left;
                this.drag.originY = rect.top;
            }

            this.drag.isDone = true;
            this.drag.duration = '.3s';
            this.drag.opacity = 0;
            if(this.drag.top > this.drag.offset){
                let tabList = document.querySelector(".tabs-list");
                let tabRect = tabList.getBoundingClientRect();
                this.drag.left = tabRect.left;
                this.drag.top = tabRect.top;
                let index = -1;
                for(let i =0,len = this.my.length;i<len; i++){
                    if(this.drag.item.name == this.my[i].name){
                        index = i;
                        break;
                    }
                }
                if(index !== -1){
                    this.removeMy(index)
                }
            }else{
                this.drag.left = this.drag.originX;
                this.drag.top = this.drag.originY;
            }
        },
        dragTransitonEnd(e){
            if(!this.drag.isDone) return false;

            this.drag.left = 0;
            this.drag.top = 0;
            this.drag.x = 0;
            this.drag.y = 0;
            this.drag.opacity = 0;
            this.drag.isDone = false;
            this.drag.originX = 0;
            this.drag.originY = 0;
            this.drag.duration = '0s';
            this.drag.item ="";
            this.drag.status = false;
        },
        editOrDone(){
            this.isEdit = !this.isEdit;
        },
        removeMy(index){
            let item  = this.my[index];
            this.my.splice(index,1);
            if(item.type == 'channel'){
                this.all.unshift(item);
            }else if(item.type == 'area'){
                this.area.unshift(item);
            }
        },
        push(type,item,index){
            this.my.push(item);
            this[type].splice(index,1);
        },
        done(){
            let arr = this.freeze.concat(this.my);
            this.$emit('done',this.freeze.concat(this.my));
        },
        overflowStart(e){
            e.currentTarget.ovy = e.touches[0].pageY;
        },
        overflowHandle(e){
           let y = e.touches[0].pageY;
           let offset = y - e.currentTarget.ovy;
            if(e.currentTarget.scrollTop == 0 && offset >0 || (e.currentTarget.offsetHeight + e.currentTarget.scrollTop == e.currentTarget.scrollHeight && offset < 0)){
                e.preventDefault();
            }
        },
        overflowEnd(e){
         e.currentTarget.ovy = 0;   
        }
    }
}
</script>
<style lang="less">
.page-channel {
    position: fixed;
    z-index:99999;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #fff;
    flex-direction: column;
    &,.header {
        display: flex;
    }
    .header {
        position:relative;
        justify-content: center;
        align-items: center;
        height:90px;
        color:#282828;
        font-size:32px;
        border-bottom: 1px solid #efefef;

        .close {
            position:absolute;
            right:30px;
            top:0;
            display: flex;
            align-items: center;
            height:100%;
            padding:0 15px;
        }
    }

    .scroll-list {
        // display: flex;
        // flex-direction: column;
        padding:50px 30px;
        flex:1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tabs-list {
        flex:1;
        // -webkit-overflow-scrolling: touch;
        // overflow: auto;
    }
    .head {
        display: flex;
        align-items: center;
        height:44px;

        .tit {
            flex:1;
            font-size:30px;
            font-weight: bold;
            color:#282828;
        }
        span {
            margin-left:16px;
            font-size:24px;
            font-weight: normal;
            color:#c6c6c6;
        }
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            height:100%;
            width:98px;
            font-size:28px;
            color:#e64a19;
            border:2px solid #e64a19;
            border-radius: 22px;
        }
    }

    .item-list {
        padding:50px 0 16px;
        margin-left:-17px;
        display: flex;
        flex-wrap: wrap;
        .item {
            position: relative;
            display: block;
            margin-left:16px;
            margin-bottom:34px;
            width:160px;
            height:70px;
            text-align: center;
            font-size:30px;
            color:#5a4640;
           
            span {
                display: flex;
                justify-content: center;
                align-items: center;
                padding:0 20px;
                width:100%;
                height:100%;
                line-height:1;
                border-radius: 35px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                background-color:#f6f6f6;
                
            }
            .close {
                position:absolute;
                top:0;
                left:-9px;
            }
            &.dragging {
                a {
                    display: none;
                }
                span {
                    background-color:#fff;
                    border:2px dashed #919191;
                }
            }
            &.freeze {
                span {
                    background-color:#fff;
                    color:#e64a19;
                    border:2px solid #f6f6f6;
                }
            }
        }
    }

    .tabs {
        margin-top:22px;
        height:74px;
        display: flex;
        border-bottom:1px solid #e2e2e2;
        a {
            position:relative;
            display: flex;
            align-items: center;
            height:100%;
            font-size:30px;
            color:#919191;
            & + a {
                margin-left:42px;
            }
            &.on {
                color:#282828;
                &::after {
                    content:'';
                    position:absolute;
                    bottom:-1px;
                    left:0;
                    height:4px;
                    width:100%;
                    background-color:#e64a19;
                }
            }
        }
    }
}
</style>

